import Vue from 'vue';
import NotifyComponent from './Notify.vue';

const NotifyConstructor = Vue.extend(NotifyComponent);
let currentNotify = null;

const Notify = (options = {}) => {
  // 若已有旧通知，先销毁（避免DOM残留和叠加）
  if (currentNotify) {
    currentNotify.visible = false;
    currentNotify.$destroy(); // 销毁旧实例
    document.body.removeChild(currentNotify.$el); // 从页面移除旧DOM
    currentNotify = null;
  }

  // 处理简化调用：支持直接传字符串（如 this.$notify('提示内容')）
  const opts = typeof options === 'string'
    ? { message: options }
    : options;

  // 实例化组件，传递 props 配置
  currentNotify = new NotifyConstructor({
    propsData: opts // 传递 type/message/duration 等配置
  });

  // 关键修复：监听组件的“关闭信号”（update:visible 事件）
  currentNotify.$on('update:visible', (isVisible) => {
    currentNotify.visible = isVisible; // 更新组件的 visible 状态

    // 当 isVisible 为 false（关闭）时，等动画结束后销毁组件
    if (!isVisible) {
      setTimeout(() => {
        currentNotify.$destroy();
        document.body.removeChild(currentNotify.$el);
        currentNotify = null;
      }, 300); // 300ms 对应样式过渡时间，避免关闭时闪烁
    }
  });

  // 手动挂载组件，并添加到页面 body 中
  currentNotify.$mount();
  document.body.appendChild(currentNotify.$el);

  // 下一帧再设 visible 为 true（确保DOM已挂载，动画正常触发）
  Vue.nextTick(() => {
    currentNotify.visible = true;
  });

  return currentNotify;
};

// 快捷方法：支持 this.$notify.success() / danger() 等
['primary', 'success', 'danger', 'warning'].forEach(type => {
  Notify[type] = (message, options = {}) => {
    return Notify({
      ...options,
      type: type,
      message: message
    });
  };
});

// 全局挂载到 Vue 原型，实现所有组件可调用 this.$notify
Vue.prototype.$notify = Notify;

export default Notify;